<template>
  <div class="mission-detail-content-wrap">
    <div class="mission-detail-wrap">
      <div class="my-router-box">
        <p @click="goback">
          {{ title }}
        </p>
        <img src="../../assets/img/prev-tab@2x.png" alt="" />
        <p>{{ $t("任务详情") }}</p>
      </div>
      <div class="detail-header">
        <div class="detail-title-wrap">
          <p class="detail-title-box">
            <span>{{ detailObj.title }}</span>
            <span class="urgent-box" v-if="detailObj.urgent">{{
              $t("加急")
            }}</span>
            <span class="expected-box"
              >{{ $t("截止时间:")
              }}{{ formatDate(detailObj.expectedDate, "YYYY-MM-DD") }}</span
            >
          </p>
          <p class="detail-price-box">
            <span>¥{{ detailObj.reward / 100 }}</span>
            <span>{{ formatDate(detailObj.createTime, "MM-DD HH:mm") }}</span>
          </p>
          <div class="add-button-box">
            <p>
              {{ $t("已有")
              }}<span style="color: #339eff;font-weight: bold;">{{ detailObj.expertCount }}</span
              >{{ $t("位专家回答") }}
            </p>
            <div
              @click="addPrice"
              v-if="
                userId && userId == detailObj.publisher && detailObj.status == 2
              "
            >
              {{ $t("增加悬赏") }}
            </div>
            <div
              @click="payAgin"
              v-if="
                userId && userId == detailObj.publisher && detailObj.status == 0
              "
            >
              {{ $t("去支付") }}
            </div>
            <div
              @click="payAgin2"
              v-if="
                userId &&
                userId == detailObj.publisher &&
                detailObj.status == 3 &&
                !detailObj.settled
              "
            >
              {{ $t("支付尾款") }}
            </div>
          </div>
        </div>
        <div class="person-info-wrap">
          <div class="head-box">
            <img :src="detailObj.avatar" alt="" />
          </div>
          <div class="info-box">
            <p class="name">
              <span>{{ detailObj.nickname }}</span>
              <span>{{
                formatDate(detailObj.birthday, "YYYY-MM-DD HH:mm:ss")
              }}</span>
            </p>
            <div class="tag">
              <span>{{
                detailObj.sex == 1
                  ? $t("男")
                  : detailObj.sex == 2
                  ? $t("女")
                  : $t("未知")
              }}</span>
              <span>{{ calculateAge(detailObj.birthday) }}</span>
              <span>{{ detailObj.height }}cm</span>
              <span>{{ detailObj.weight }}kg</span>
              <span>{{ calcAddress(detailObj.detailAddress) }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-content">
        <p class="content">{{ detailObj.description }}</p>
        <div class="img-box">
          <el-image
            v-for="(citem, cindex) in detailObj.imageUrl"
            :key="cindex"
            :src="citem"
            :preview-src-list="detailObj.imageUrl"
            alt=""
            fit="cover"
          ></el-image>
        </div>
        <p class="content-title" v-if="commentList1.length != 0">
          {{ $t("阶段反馈") }}
        </p>
        <!-- <div class="none-box" v-if="commentList1.length == 0">
          {{ $t("暂无数据") }}
        </div> -->
        <div v-for="(item, index) in commentList1" :key="index">
          <p class="content">{{ item.content }}</p>
          <div class="img-box">
            <el-image
              v-for="(citem, cindex) in item.imageUrl.split(',')"
              :key="cindex"
              :src="citem"
              :preview-src-list="item.imageUrl.split(',')"
              alt=""
              fit="cover"
            ></el-image>
          </div>
        </div>
        <p class="content-title" v-if="commentList2.length != 0">
          {{ $t("结单评价") }}
        </p>
        <!-- <div class="none-box" v-if="commentList2.length == 0">
          {{ $t("暂无数据") }}
        </div> -->
        <div v-for="(item, index) in commentList2" :key="index">
          <p class="content">{{ item.content }}</p>
          <div class="img-box">
            <el-image
              v-for="(citem, cindex) in item.imageUrl.split(',')"
              :key="cindex"
              :src="citem"
              :preview-src-list="item.imageUrl.split(',')"
              alt=""
              fit="cover"
            ></el-image>
          </div>
        </div>
        <div
          style="text-align: center; margin-top: 0.94rem"
          v-if="
            userId && userId == detailObj.publisher && detailObj.status == 3
          "
        >
          <button
            class="my-button"
            @click="$refs['evaluateDialog2'].openDialog(detailObj.id)"
            style="width: 33.33rem"
          >
            {{ $t("评价") }}
          </button>
        </div>
      </div>
    </div>
    <div class="mission-answer-wrap">
      <p class="answer-title">{{ $t("调查问卷") }}</p>
      <div v-for="(item, index) in detailObj.survey" :key="index">
        <p class="answer-name">{{ item.title }}</p>
        <p class="answer-content">{{ $t("回答:") }}{{ item.pitch }}</p>
      </div>
      <template v-if="isExpert && userId && userId != detailObj.publisher">
        <el-input
          type="textarea"
          rows="4"
          :placeholder="$t('我有更好的解决方案...')"
          v-model="schemeContent"
        ></el-input>
        <div style="text-align: center; margin-top: 0.94rem">
          <button
            class="my-button"
            @click="createScheme"
            v-loading="isLoading"
            style="width: 33.33rem"
          >
            {{ $t("提交方案") }}
          </button>
        </div>
      </template>
    </div>
    <div class="mission-plan-wrap" v-if="userId">
      <p class="plan-title">{{ $t("专家方案") }}</p>
      <div class="none-box" v-if="planList.length == 0">
        {{ $t("暂无数据") }}
      </div>
      <div
        class="plan-item-wrap"
        v-for="(item, index) in planList"
        :key="index"
      >
        <div class="person-info-wrap">
          <div class="head-box">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="info-box">
            <p class="name">
              <span>{{ item.receiverName }}</span>
              <span>{{ $t("擅长领域:") }}{{ item.skilledIn }}</span>
              <span v-if="item.status == 2">{{ $t("指定的接单专家") }}</span>
            </p>
            <p class="tag">
              <span v-for="(citem, cindex) in item.tagNames" :key="cindex">{{
                citem
              }}</span>
            </p>
          </div>
          <div class="start-box">
            <i class="el-icon-star-on"></i>
            <span>{{ $t("综合评分:") }}{{ item.score || 0 }}</span>
            <div
              @click="pinjia(item)"
              v-if="userInfo.evaluate && userId != item.receiverId"
            >
              {{ $t("评价") }}
            </div>
          </div>
        </div>
        <div class="plan-content-box">
          {{ item.context }}
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          :current-page="page.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="$t('悬赏金额')"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      class="my-dialog__wrapper"
    >
      <div class="addprice-wrap">
        <div class="info-item-wrap" style="margin-bottom: 0.89rem">
          <p class="info-title">{{ $t("悬赏金额") }}</p>
          <el-input
            type="number"
            v-model="addReward"
            :placeholder="0"
          ></el-input>
        </div>
        <div class="info-item-wrap" style="margin-bottom: 0.89rem">
          <p class="info-title">{{ $t("任务小费") }}</p>
          <el-input type="number" v-model="addTip" :placeholder="0"></el-input>
        </div>
        <div
          class="my-check-box-item"
          :class="{ active: addUrgent }"
          v-if="!detailObj.urgent"
        >
          <div class="check-box" @click="changeUrgent">
            <i class="el-icon-check"></i>
          </div>
          <p>
            {{ $t("加急")
            }}<span style="color: #f85c02"
              >{{ $t("《额外支付¥")
              }}{{ configData.chargeTaskUrgent / 100 }}》</span
            >
          </p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t("取 消") }}</el-button>
        <el-button type="primary" @click="goToPay">{{
          $t("去付款")
        }}</el-button>
      </span>
    </el-dialog>
    <payDialog ref="payDialog" @payDone="payDone" :payId="payId"></payDialog>
    <evaluateDialog ref="evaluateDialog" @initPinjia="getPlan"></evaluateDialog>
    <evaluateDialog2
      ref="evaluateDialog2"
      @initPinjia="getPinjia"
    ></evaluateDialog2>
  </div>
</template>
<script>
import api from "@/api/mission.js";
import api2 from "@/api/reward.js";
import { formatDate, calculateAge } from "@/utils/index.js";
import evaluateDialog from "./component/evaluateDialog.vue";
import evaluateDialog2 from "./component/evaluateDialog2.vue";
export default {
  components: {
    evaluateDialog,
    evaluateDialog2,
  },
  data() {
    return {
      id: null,
      detailObj: {},
      commentList1: [],
      commentList2: [],
      dialogVisible: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      planList: [],
      addUrgent: false,
      addReward: "",
      addTip: "",
      payId: null,
      fromPage: null,
      isLoading: false,
      schemeContent: "",
    };
  },
  computed: {
    configData() {
      let configData = this.$store.state.configData;
      return configData || {};
    },
    userId() {
      return this.$store.state.userId;
    },
    isExpert() {
      return this.$store.getters.isExpert;
    },
    userInfo() {
      if (this.$store.state.userInfo) {
        return JSON.parse(this.$store.state.userInfo);
      } else {
        return {};
      }
    },
    title() {
      if (this.fromPage && this.fromPage.name != "PersonCenter") {
        return this.$t("任务广场");
      } else {
        if (this.$store.state.personTab == 3) {
          return this.$t("我的接单");
        } else {
          return this.$t("我的发单");
        }
      }
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getData();
    this.getComment1();
    this.getComment2();
    if (this.userId) {
      this.getPlan();
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.fromPage = from;
    });
  },
  methods: {
    getPinjia(type) {
      if (this.type == 1) {
        this.getComment1();
      } else {
        this.getComment2();
      }
    },
    pinjia(item) {
      this.$refs["evaluateDialog"].openDialog(item.id);
    },
    goback() {
      if (this.fromPage && this.fromPage.name == "PersonCenter") {
        this.$router.push(`/personcenter`);
      } else {
        this.$router.push("/mission");
      }
    },
    async payDone() {
      let res = await this.$http.get(api2.getOrderPayType, {
        params: { id: this.payId, sync: true },
      });
      this.dialogVisible = false;
      this.addReward = "";
      this.addTip = "";
      this.payId = null;
      this.addUrgent = false;
      this.getData();
    },
    async goToPay() {
      if (this.addReward || this.addTip || this.addUrgent) {
        let res = await this.$http.post(
          `${api.addReward}?reward=${this.addReward * 100}&tip=${
            this.addTip * 100
          }&fee=${this.addUrgent ? this.configData.chargeTaskUrgent : 0}&id=${
            this.detailObj.id
          }`
        );
        if (res && res.code == 0) {
          this.payId = res.data;
          this.$refs["payDialog"].openDialog();
        } else {
          this.$message.error(res.msg || this.$t("网络错误"));
        }
      } else {
        this.$message.warning("请任意填入一项金额");
      }
    },
    changeUrgent() {
      this.addUrgent = !this.addUrgent;
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async getData() {
      let res = await this.$http.get(api.getDetail, {
        params: {
          id: this.id,
        },
      });
      if (res && res.code == 0) {
        this.detailObj = res.data;
        this.detailObj.survey.forEach((survey) => {
          if (survey.type == 1) {
            survey.value = JSON.parse(survey.value);
            let item = survey.value.find((c) => c.value == survey.pitch);
            survey.pitch = item.label;
          }
          if (survey.type == 2) {
            survey.value = JSON.parse(survey.value);
            let item = survey.value.find((c) => c.value == survey.pitch);
            survey.pitch = item.label;
          }
          if (survey.type == 3) {
            survey.value = JSON.parse(survey.value);
            survey.pitch = survey.pitch.split(",");
            let item = survey.value.find((c) => c.value == survey.pitch);
            let pitch = "";
            survey.value.forEach((c) => {
              if (survey.pitch.includes(c.value)) {
                pitch = pitch ? pitch + "," + c.label : c.label;
              }
            });
            survey.pitch = pitch;
          }
        });
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async getComment1() {
      // 阶段反馈
      let res = await this.$http.get(api.getComment, {
        params: {
          taskId: this.id,
          type: 1,
          pageNo: 1,
          pageSize: 10,
        },
      });
      if (res && res.code == 0) {
        this.commentList1 = res.data.list;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async getComment2() {
      // 结单评价
      let res = await this.$http.get(api.getComment, {
        params: {
          taskId: this.id,
          type: 2,
          pageNo: 1,
          pageSize: 10,
        },
      });
      if (res && res.code == 0) {
        this.commentList2 = res.data.list;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async getPlan() {
      // 出方案的专家
      let res = await this.$http.get(api.getPlan, {
        params: {
          taskId: this.id,
          // status: 3,
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
        },
      });
      if (res && res.code == 0) {
        this.planList = res.data.list;
        this.page.total = res.data.total;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async createScheme() {
      if (!this.schemeContent) {
        return this.$message.warning(this.$t("请输入内容"));
      }
      this.isLoading = true;
      // 出方案的专家
      let res = await this.$http.post(api.createScheme, {
        taskId: this.detailObj.id,
        title: "1",
        context: this.schemeContent,
      });
      this.isLoading = false;
      if (res && res.code == 0) {
        this.schemeContent = "";
        this.$message.success("提交成功");
        this.handleCurrentChange(1);
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    formatDate(time, format) {
      return formatDate(time, format);
    },
    calculateAge(time) {
      return calculateAge(time);
    },
    calcAddress(addr) {
      let i = addr ? addr.indexOf(" ") : -1;
      if (i == 0 || i == -1) {
        return this.$t("未知");
      } else {
        return addr.slice(0, i);
      }
    },
    addPrice() {
      this.dialogVisible = true;
    },
    async payAgin() {
      let res = await this.$http.post(
        `${api.payAgin}?taskId=${this.detailObj.id}`
      );
      if (res && res.code == 0) {
        this.payId = res.data;
        this.$refs["payDialog"].openDialog();
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async payAgin2() {
      let res = await this.$http.post(
        `${api.payAgin}?taskId=${this.detailObj.id}`
      );
      if (res && res.code == 0) {
        this.payId = res.data;
        this.$refs["payDialog"].openDialog();
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNo = 1;
      this.getPlan();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getPlan();
    },
  },
};
</script>
<style lang="scss" scoped>
.mission-detail-wrap {
  width: 64.39rem;
  background: #f5f7fa;
  border-radius: 0.44rem;
  margin: 3.72rem auto 0 7.78rem;
  .detail-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.03rem solid #dcdfe6;
    padding: 1.33rem;
    .detail-title-wrap {
      .detail-title-box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 1.04rem;
        span {
          font-size: 0.67rem;
          color: #ffffff;
        }
        span:nth-child(1) {
          font-weight: bold;
          font-size: 1.33rem;
          color: #333333;
          margin-right: 0.44rem;
        }
        .urgent-box {
          width: 1.78rem;
          height: 1.11rem;
          background: #c95441;
          border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
          text-align: center;
          margin-right: 0.44rem;
          margin-top: 0.2rem;
        }
        .expected-box {
          width: 7rem;
          height: 1.11rem;
          background: #339eff;
          border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
          text-align: center;
          margin-top: 0.2rem;
        }
      }
      .detail-price-box {
        span:nth-child(1) {
          font-weight: bold;
          font-size: 1.2rem;
          color: #f85c02;
          line-height: 1.22rem;
          letter-spacing: 2px;
          margin-right: 0.89rem;
        }
        span:nth-child(2) {
          font-size: 0.78rem;
          color: #999999;
        }
      }
      .add-button-box {
        display: flex;
        align-items: center;
        margin-top: 0.94rem;
        p {
          font-size: 0.78rem;
          color: #333333;
          margin-right: 0.44rem;
        }
        div {
          width: 4.89rem;
          height: 2rem;
          background: #f85c02;
          box-shadow: 0rem 0.22rem 0.22rem 0rem rgba(201, 84, 65, 0.15);
          border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
          font-weight: bold;
          font-size: 0.78rem;
          color: #ffffff;
          line-height: 2rem;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .person-info-wrap {
      width: 24.39rem;
      height: 6.28rem;
      background: rgba(66, 95, 155, 0.05);
      border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
      border: 0.06rem solid #dcdfe6;
      display: flex;
      align-items: center;
      justify-content: center;
      .head-box {
        width: 3.56rem;
        height: 3.56rem;
        margin-right: 0.89rem;
        border-radius: 2rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info-box {
        .name {
          display: flex;
          align-items: center;
          span:nth-child(1) {
            font-weight: bold;
            font-size: 1rem;
            color: #333333;
            line-height: 1.22rem;
            letter-spacing: 2px;
            margin-right: 0.89rem;
          }
          span:nth-child(2) {
            font-size: 0.78rem;
            color: #333333;
            line-height: 1.22rem;
            letter-spacing: 1px;
          }
        }
        .tag {
          span {
            line-height: 1.11rem;
            font-size: 0.67rem;
            color: #339eff;
            border: 0.06rem solid #339eff;
            padding: 0 0.12rem;
            margin-right: 0.22rem;
          }
        }
      }
    }
  }
  .detail-content {
    padding: 1.33rem;
    .content {
      width: 39.89rem;
      font-size: 0.89rem;
      color: #666666;
      line-height: 1.56rem;
      text-align: justify;
    }
    .img-box {
      margin: 0.78rem 0;
      ::v-deep img {
        width: 6.41rem;
        height: 7.48rem;
        margin-right: 0.56rem;
      }
    }
    .content-title {
      font-weight: bold;
      font-size: 1.33rem;
      color: #333333;
    }
  }
}
.mission-answer-wrap {
  width: 64.39rem;
  background: #f5f7fa;
  border-radius: 0.44rem;
  margin: 0.5rem auto 0 7.78rem;
  padding: 1.33rem;
  .answer-title {
    font-weight: bold;
    font-size: 1.33rem;
    color: #333333;
    margin-bottom: 1.33rem;
  }
  .answer-name {
    font-size: 0.78rem;
    color: #999999;
  }
  .answer-content {
    font-size: 0.78rem;
    color: #333333;
    margin-bottom: 1.33rem;
  }
}
.mission-plan-wrap {
  width: 64.39rem;
  background: #f5f7fa;
  border-radius: 0.44rem;
  margin: 0.5rem auto 0 7.78rem;
  padding: 1.33rem;
  .plan-title {
    font-weight: bold;
    font-size: 1.33rem;
    color: #333333;
    margin-bottom: 1.33rem;
  }
  .plan-item-wrap {
    padding: 1.33rem;
    background: rgba(66, 95, 155, 0.05);
    border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
    border: 0.06rem solid #dcdfe6;
    margin-bottom: 0.94rem;
    .person-info-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.03rem solid #dcdfe6;
      padding-bottom: 0.94rem;
      .head-box {
        width: 3.56rem;
        height: 3.56rem;
        margin-right: 0.89rem;
        border-radius: 2rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info-box {
        flex: 1;
        .name {
          span:nth-child(1) {
            font-weight: bold;
            font-size: 1rem;
            color: #333333;
            line-height: 1.22rem;
            letter-spacing: 2px;
            margin-right: 0.89rem;
          }
          span:nth-child(2) {
            font-size: 0.78rem;
            color: #333333;
            line-height: 1.22rem;
            letter-spacing: 1px;
            margin-right: 0.89rem;
          }
          span:nth-child(3) {
            font-size: 0.78rem;
            color: #fff;
            line-height: 1.22rem;
            letter-spacing: 1px;
            background: #339eff;
            padding: 0.3rem;
          }
        }
        .tag {
          span {
            line-height: 1.11rem;
            font-size: 0.67rem;
            color: #fff;
            padding: 0 0.12rem;
            margin-right: 0.22rem;
            background: #339694;
            border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
          }
        }
      }
      .start-box {
        display: flex;
        align-items: center;
        i {
          font-size: 0.77rem;
          color: #ffaa22;
          margin-right: 0.5rem;
        }
        span {
          font-size: 0.78rem;
          color: #333333;
        }

        div {
          width: 4rem;
          height: 1.56rem;
          background: #339eff;
          border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
          text-align: center;
          line-height: 1.56rem;
          font-size: 0.67rem;
          color: #ffffff;
          margin-left: 1rem;
          cursor: pointer;
        }
      }
    }
    .plan-content-box {
      padding-top: 0.94rem;
      font-size: 1rem;
      color: #333333;
      line-height: 1.22rem;
      letter-spacing: 2px;
      text-align: justify;
    }
  }
  .pagination-box {
    text-align: center;
  }
}
.addprice-wrap {
  width: 16.67rem;
  margin: 0 auto;
  .info-title {
    font-size: 0.89rem;
    color: #666666;
    line-height: 1.56rem;
    margin-bottom: 0.44rem;
  }
}
</style>
<style lang="scss">
.mission-detail-content-wrap {
  margin-bottom: 5.61rem;
  .el-textarea {
    .el-textarea__inner {
      width: 100%;
      border-color: #425f9b;
      font-size: 0.89rem;
      background: transparent;
    }
  }
  .el-pagination.is-background .el-pager li {
    border-radius: 0.2rem;
    border: 0.06rem solid #d9dbe2;
    background: #ffffff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    border: 0.06rem solid #146eb4;
    color: #146eb4;
    background: #ffffff;
  }
}
.addprice-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
  }
}
</style>
